import { useState, useEffect } from "react";
import { history } from "umi";
import "./SmithShopStyles.css";
import Character from "@/components/Character";
import backgroundImage from "@/assets/p1/scenes/smithshop-background.png";
import dialogImage from "@/assets/p1/dialog_background_green.png";
import characterImage from "@/assets/p1/characters/protagonist.png";
import protagonistImage from "@/assets/p1/characters/protagonist-right.png";
import ironmanImage from "@/assets/p1/characters/ironman.png";
import ironmanLeftImage from "@/assets/p1/characters/ironman-left.png";
import TreasureBox from "@/components/TreasureBox";
import AchievementList from "@/components/AchievementList";
import Dialog from "@/components/Dialog";
import front1 from "@/assets/p1/front1.png";
import front2 from "@/assets/p1/front2.png";
import front3 from "@/assets/p1/front3.png";
import back1 from "@/assets/p1/back1.PNG";
import back2 from "@/assets/p1/back2.PNG";
import back3 from "@/assets/p1/back3.PNG";
import left1 from "@/assets/p1/left1.png";
import left2 from "@/assets/p1/left2.png";
import left3 from "@/assets/p1/left3.png";
import right1 from "@/assets/p1/right1.png";
import right2 from "@/assets/p1/right2.png";
import right3 from "@/assets/p1/right3.png";

const SmithShopScene = ({}) => {
	const [showCard, setShowCard] = useState(false);
	const screenWidth = window.innerWidth; // 1707
	const screenHeight = window.innerHeight; // 791
	// 角色初始位置是 initPositionX 和 initPositionY
	const initPositionX = screenWidth * 0.75;
	const initPositionY = screenHeight * 0.7;
	const [dialog1, setDialog1] = useState(false);
	const [characterPosition, setCharacterPosition] = useState({
		x: initPositionX,
		y: initPositionY,
	});
	const handlePositionChange = newPosition => {
		setCharacterPosition(newPosition);
	};

	const characterImages = {
		front: [front1, front2, front3, front2],
		left: [left1, left2, left3, left2],
		right: [right1, right2, right3, right2],
		back: [back1, back2, back3, back2]
	};
	const xIronman = screenWidth * 0.7;
	const yIronmaan = screenHeight * 0.25;

	const dialogues = [
		"请问这里有见到过这种玄铁的吗？",
		"这种贵重的玄铁我这里是没有做的，但是前两天老李家的儿子李四经常来这里卖这种玄铁，我见这种东西很稀有就花高价买下来了，有什么问题吗？",
		"方便透露一下他住哪里吗？",
		"在那边那条小路，往里走就到了。",
		"",
	];

	useEffect(() => {
		if (
			Math.sqrt(
				Math.pow(characterPosition.x - xIronman, 2) +
					Math.pow(characterPosition.y - yIronmaan, 2)
			) <= 150 &&
			!showCard
		) {
			setDialog1(true);
		}
	}, [characterPosition.x, characterPosition.y]);
	return (
		<div
			className="backgroundImage"
			style={{ backgroundImage: `url(${backgroundImage})` }}
		>
			<TreasureBox />
			<AchievementList />

			<Character
				characterImage={characterImage}
				characterImages={characterImages}
				canMove={true}
				initPositionX={initPositionX}
				initPositionY={initPositionY}
				onPositionChange={handlePositionChange}
				ifProtagonist="true"
			/>
			<Character
				characterImage={ironmanImage}
				initPositionX={xIronman}
				initPositionY={yIronmaan}
			/>
			{dialog1 && (
				<Dialog
					dialogues={dialogues}
					backgroundImage={dialogImage}
					triggerIndexEvents={[4]}
					eventHandlers={[
						() => {
							setShowCard(true);
							setDialog1(false);
						},
					]}
					dialogueImages={[
						{ leftImage: protagonistImage },
						{
							rightImage: ironmanLeftImage,
						},
						{
							leftImage: protagonistImage,
						},
						{
							rightImage: ironmanLeftImage,
						},
					]}
				/>
			)}
			{showCard && (
				<div
					className="next"
					onClick={() => {
						history.push("/p1/ShaoGuangChapterScene");
					}}
				>
					前往李四家
				</div>
			)}
		</div>
	);
};

export default SmithShopScene;
